<template>
  <div class="mass-send">
    <div class="card mass-send__search">
      <el-form inline>
        <el-form-item label="通知标题：">
          <el-input v-model="params.title" placeholder="请输入通知标题" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="card">
      <div class="mass-send__btn-group">
        <el-button
          type="primary"
          @click="handleOpenMassSendDialog"
        >
          发送群发通知
        </el-button>
      </div>

      <el-table
        v-loading="loading"
        :data="list"
        border
        stripe
      >
        <el-table-column
          label="通知标题"
          prop="title"
          align="center"
        />

        <el-table-column
          label="通知内容"
          prop="content"
          align="center"
        >
          <template v-slot="{ row }">
            <el-button
              type="text"
              @click="handleViewContent(row)"
            >
              查看内容
            </el-button>
          </template>
        </el-table-column>

        <el-table-column
          label="发送人"
          align="center"
          prop="user.username"
        />

        <el-table-column
          label="通知接收人"
          prop="recipient"
          align="center"
        >
          <template v-slot="{ row }">
            <el-button
              type="text"
              @click="handleOpenRecipientListDialog(row)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>

        <el-table-column
          label="通知时间"
          align="center"
          prop="created_at"
        >
          <template v-slot="{ row }">
            {{ timeFormat(row.created_at) }}
          </template>
        </el-table-column>
      </el-table>

      <div class="mass-send__pagination">
        <Pagination
          style="margin-top: 0; padding-bottom: 0;"
          :total="total"
          :page="params.page"
          :limit="params.paginate"
          @pagination="pagination"
        />
      </div>
    </div>

    <MassSendDialog
      :visible.sync="massSendDialogVisible"
      :loading="btnLoading"
      @confirm="handleMassSendConfirm"
    />

    <WithDialog
      title="通知内容查看"
      :visible.sync="contentDialogVisible"
      :show-cancel-btn="false"
      @confirm="contentDialogVisible = false"
    >
      <div v-html="currentNotice?.content" />
    </WithDialog>

    <WithDialog
      title="通知内容查看"
      :visible.sync="recipientDialogVisible"
      :show-cancel-btn="false"
      @confirm="recipientDialogVisible = false"
    >
      <div class="recipient-list">
        <el-table
          :data="recipientList"
          border
          stripe
        >
          <el-table-column
            label="姓名"
            prop="username"
            align="center"
          />

          <el-table-column
            label="性别"
            prop="gender"
            align="center"
          >
            <template v-slot="{ row }">
              {{ row.gender === 1 ? '男' : '女' }}
            </template>
          </el-table-column>

          <el-table-column
            label="联系电话"
            prop="phone"
            align="center"
          />

          <el-table-column
            label="已读情况"
            prop="phone"
            align="center"
          >
            <template v-slot="{ row }">
              <el-tag
                :type="row.unread ? 'danger' : 'success'"
              >
                {{ row.unread ? '未读' : '已读' }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>

        <div class="mass-send__pagination">
          <Pagination
            style="margin-top: 0; padding-bottom: 0;"
            :total="currentNotice?.recipient?.length"
            :page="recipientParams.page"
            :limit="recipientParams.paginate"
            @pagination="recipientPagination"
          />
        </div>
      </div>
    </WithDialog>
  </div>
</template>

<script>
import MassSendDialog from '@/views/noticeUserSetting/components/massSend/MassSendDialog.vue'
import { createMassSendMessage, getMassSendMessageList } from '@/api/notice'
import WithDialog from '@/components/WithDialog/withDialog.vue'
import Pagination from '@/components/Pagination/index.vue'
import { timeFormat } from '../../utils'
export default {
  name: '',
  components: {
    Pagination,
    WithDialog,
    MassSendDialog
  },
  data() {
    return {
      list: [],
      loading: false,
      massSendDialogVisible: false,
      btnLoading: false,
      params: {
        page: 1,
        paginate: 10,
        user_id: 'me',
        title: ''
      },
      total: 0,
      contentDialogVisible: false,
      currentNotice: null,
      recipientDialogVisible: false,
      recipientParams: {
        page: 1,
        paginate: 10
      }
    }
  },
  computed: {
    recipientList() {
      return this.currentNotice?.recipient?.slice(
        (this.recipientParams.page - 1) * this.recipientParams.paginate,
        this.recipientParams.page * this.recipientParams.paginate
      ).map(item => {
        return {
          ...item,
          unread: this.currentNotice?.unread_users.some(unReadItem => unReadItem.id === item.id)
        }
      })
    }
  },
  mounted() {
    this.getMassSendList()
  },
  methods: {
    timeFormat,

    async getMassSendList() {
      this.loading = true
      try {
        const res = await getMassSendMessageList(this.params)
        this.list = res.data.data
        this.total = res.data.total
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '获取群发通知列表失败')
      } finally {
        setTimeout(() => {
          this.loading = false
        }, 500)
      }
    },

    handleOpenMassSendDialog() {
      this.massSendDialogVisible = true
    },

    handleMassSendConfirm(data) {
      this.createMassSendMessageFetch({
        ...data,
        recipient: JSON.stringify(data.recipient)
      })
    },

    async createMassSendMessageFetch(data) {
      this.btnLoading = true
      try {
        const res = await createMassSendMessage(data)
        this.massSendDialogVisible = false
        this.$message.success('群发通知发送成功')
        this.refresh()
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '群发通知发送失败')
      } finally {
        this.btnLoading = false
      }
    },

    refresh() {
      this.params.page = 1
      this.getMassSendList()
    },

    handleViewContent(row) {
      this.currentNotice = row
      this.contentDialogVisible = true
    },

    handleOpenRecipientListDialog(row) {
      this.currentNotice = row
      this.recipientDialogVisible = true
    },

    pagination(page) {
      this.params.page = page.page
      this.params.paginate = page.limit
      this.getMassSendList()
    },

    recipientPagination(page) {
      this.recipientParams.page = page.page
      this.recipientParams.paginate = page.limit
    },

    handleSearch() {
      this.params.page = 1
      this.getMassSendList()
    },

    handleReset() {
      this.params = this.$options.data().params
      this.getMassSendList()
    }
  }
}
</script>
<style lang="scss" scoped>
.mass-send {
  padding: 20px;

  &__pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  &__btn-group {
    margin-bottom: 20px;
  }

  &__search {
    ::v-deep(.el-form-item) {
      margin-bottom: 0;
      margin-right: 20px;
      .el-form-item__label {
        font-weight: 400;
      }
    }
  }

}
</style>
